<template>
    <el-table :data="productList" stripe style="width: 100%">
      <el-table-column prop="id" label="序号" header-align="center" align="center" />
      <el-table-column prop="title" label="商品名称" header-align="center" align="center" />
      <el-table-column prop="price" label="价格"  header-align="center" align="center" />
      <el-table-column prop="number" label="库存" header-align="center" align="center" />
      <el-table-column label="操作" header-align="center" align="center">
        <template #default="scope">
          <el-button type="success" @click="addProduct(scope.row)">添加到购物车</el-button>
        </template>
      </el-table-column>
    </el-table>
</template>

<script setup>
import { useShoppingCarStore } from '../stores/shopcart'
import { storeToRefs } from 'pinia'

const { productList } =storeToRefs(useShoppingCarStore())
const { addProduct } = useShoppingCarStore()
</script>

<style lang="scss" scoped>
.el-table {
  width: 100%;
  .el-table-column {
    width: 20%;
  }
}
</style>